<template>
  <div class="look-superior" v-loading="loading">
        <div class="superior-list" v-if="list.length!==0">
            <div class="superior-header">
                <span class="superior-relation">关系</span>
                <span class="superior-name">姓名</span>
                <span class="superior-grade">等级</span>
                <span class="superior-phone">号码</span>
            </div>
            <div class="superior-cell" v-for="(cell,index) in list" :key="index">
                <span class="superior-relation" v-html="['上级','上上级','上上上级'][index] || '超出三级了'"></span>
                <span class="superior-name" v-html="cell.name"></span>
                <span class="superior-grade" v-html="'LV.'+cell.grade"></span>
                <span class="superior-phone" v-html="cell.phone"></span>
            </div>
        </div>
        <div v-else>
            没有上级
        </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
export default {
  name:'look-superior',
  props:{
      cell:{
          type:Object,
          default:function(){
              return {}
          }
      }
  },
  data () {
    return {
        list:[],
        loading:false
    };
  },
  components: {},
  created() {
      this.loading = true;
      let url = USB.U07 +`?userid=${this.cell.userid}`;
      this.$Http.get(url).then(res=>{
        this.loading = false;
        if(res.data.resp_code === '000000'){
           this.list = res.data.result || [];
        }else{
          this.$message.info(res.data.resp_message)
        }
      }).catch(err=>{
        this.$notify.error({
          title: '出错啦',
          message: "获取上级信息失败！"
        }); 
        this.loading = false;
      })
  },
  mounted() {},
  methods: {}
}

</script>
<style scoped>
.superior-list{
  width: 100%;
  border: 1px solid #eeddee;
  padding: 20px 0;
  min-width: 200px;
}
.superior-header{
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ededed;
}
.superior-cell{
   height: 40px;
   line-height: 40px;
}
.superior-relation,.superior-name,.superior-grade,.superior-phone{
  display: inline-block;
  width: 24%;
  text-align: center;
}
</style>